<template>
  <div class="contain-edit message-edit">
    <div class="header">
      <p>公告管理/发布公告</p>
      <el-button class="link" type="primary">
        <router-link to="/" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
        <el-form-item label="公告标题：" prop="title">
          <el-input v-model="information.title" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="公告内容：" prop="content">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            style="width: 50%"
            v-model="information.content">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('information')"  :loading="loading">发布</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");
  import $ from 'jquery'
  import $axios from 'axios'
  export default {
    data() {
      return {
        id:null,
        pageCount:null,
        pageIndex:1,
        pageSize:10,
        upLoadUrl:"",
        upLoadHeaders:{},
        eventImageUrl:'',
        imageUrl:null,
        information:{
          title:null,
          content:null,
        },
        rules: {
          title: [
            { required: true, message: '请输入公告标题', trigger: 'blur' },
          ],
          content: [
            { required: true, message: '请输入公告内容', trigger: 'blur' }
          ]
        },
        loading: false,

        identify: ""
      };
    },
    components:{
      'bg-editor':()=>import('../common/bg-editor.vue')
    },
    mounted() {
      this.identify = sessionStorage.getItem("identify");
      this.id = this.$router.currentRoute.query.id;
      if(this.id){
        this.getDetail();
      }
    },
    methods: {
      getDetail(){
        let url = "";
        if (this.identify == 1) {
          url = CONSTANT.URL.ANNOUNCE.DETAIL
        } else {
          url = CONSTANT.URL.L_ANNOUNCE.DETAIL;
        }
        let data = {
          id:this.id
        } ;
        common.requestAjax(url,data,null,(res)=>{
          this.information = res.data.bussData
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
            if(this.information.id){
              var url = this.identify == 1 ? CONSTANT.URL.ANNOUNCE.UPDATE : CONSTANT.URL.L_ANNOUNCE.UPDATE;
            }else{
              var url = this.identify == 1 ? CONSTANT.URL.ANNOUNCE.ADD : CONSTANT.URL.L_ANNOUNCE.ADD;
            }
            let data = {
              content:this.information.content,
              title: this.information.title,
              id:this.information.id
            };
            let param = JSON.stringify(data);
            common.requestAjax(url, param, null, res => {
              if(res.status == 200) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                });
                this.loading = false;
                this.$router.push("/");
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg
                });
                this.loading = false;
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      back(){this.$router.push('/');}
    }
  }
</script>

<style lang="scss" scoped >
  @import '/static/bootstrap.css';
  @import '/sys/static/bootstrap.css';
  .message-edit  {
    .el-form-item__content{
      margin-left: 0;
    }
    .avatar-uploader {
      border-radius: 6px;
      box-sizing: border-box;
      vertical-align: top;
      .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
          border: 1px dashed #d9d9d9 !important;
          border-radius: 6px;
          margin-left: 6px;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
      .el-upload:hover {
        border-color: #20a0ff;
      }
    }
  }

</style>
